<!--
 * @Author: Bonnie
 * @Date: 2021-12-03 16:27:38
 * @LastEditTime: 2021-12-20 16:46:02
 * @LastEditors: Bonnie
 * @Description: 
 * @FilePath: /public_demo/src/views/shrinkage/index.vue
-->
//  收缩文本 （练习一些小东西）
<template>
  <div class="root-container">
    <div class="shrikage-container">
      <h3>文本的收缩 、 展开</h3>
      <div>
        <span id="content">{{text}}</span>
        <em @click="changeStatus" class="cursor-pointer">{{status=='展开'?'收缩':"展开"}}</em>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "",
  components: {},
  props: [],
  data() {
    return {
      status: "展开",
      text:
        "这里是是进行操作的文本。嘴硬到底是什么概念 大概就是 你问我怎么了 其实我眼泪都要掉下来了 但我还是说了句 算了 就这样吧 ——网易云热评《你就不要想起我》"
    };
  },
  created() {},
  mounted() {
    // let cookie_name = "mine_cookie",
    //   cookie_value = "abcdefg_1234567890";
    // this.setCookie(cookie_name, cookie_value, 5);
    // document.cookie = cookieName+"="+encodeURIComponent(cookie_value)+";path=/;domain="+getPath('domain').slice(1)+";expires="+expdate.toGMTString();
  },
  methods: {
    checkProductType(id) {
      let ele = document.getElementsByClassName(id);
      ele[0].style.color = "red";
    },
    changeStatus() {
      let status = "收缩";
      let span = document.getElementById("content");
      let text = span.innerText;
      let subText = this.text.slice(0, 11) + "..." + this.text.slice(-9);
      if (this.status == "收缩") {
        status = "展开";
        subText = this.text;
      }

      span.innerText = subText;
      this.status = status;
    }
  }
};
</script>
<style lang='scss' scoped>
.shrikage-container {
  width: 300px;

  h3 {
    margin-bottom: 30px;
  }
  em {
    color: blueviolet;
  }
}
</style>